<template>
  <div class="app-onlineerror">
    <el-row>
      <el-col>
        <el-form :inline="true" :model="search" label-width="120px">
          <el-form-item :label="$t('keyword')">
            <el-input v-model="search.filter" :placeholder="$t('searchKeyword')" clearable />
          </el-form-item>
          <el-form-item :label="$t('module')">
            <el-select v-model="search.bussinessModule" clearable filterable>
              <el-option
                v-for="item in moduleList"
                :key="item.name"
                :value="item.name"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('logTime')">
            <el-date-picker
              v-model="dataValue"
              :default-time="['00:00:00','23:59:59']"
              type="daterange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="doSearch">{{ $t('search') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="12">
        <el-button
          type="danger"
          icon="el-icon-delete"

          @click="switchHandle('del')"
        >{{ $t('clearAll') }}</el-button>
      </el-col>
    </el-row> -->
    <el-card class="box-card">
      <!-- 表单部分 -->
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <el-dialog :visible.sync="dialog" :title="$t('errorDetail')" append-to-body top="30px" width="65%">
        <!-- <pre v-highlightjs="errorInfo"><code class="java" /></pre> -->
        <div>{{ errorInfo }}</div>
      </el-dialog>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import crudJob from '@/api/monitor/apihistory'
import enumJob from '@/api/system/enum'
import Pagination from '@/components/Pagination'
import mySetting from '@/mixins/mySetting'
import { clearNull } from '@/utils/myTools'
import DateRangePicker from '@/components/DateRangePicker'
export default {
  name: 'History',
  components: { Pagination, DateRangePicker },
  mixins: [mySetting],
  data() {
    return {
      errorInfo: '',
      dialog: false,
      dataValue: null,
      delLoading: false,
      search: {},
      moduleList: [],
      logLevelList: [],
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        {
          prop: 'id',
          label: this.$t('guid'),
          width: '300px'
        },
        {
          prop: 'bussinessModule',
          label: this.$t('module'),
          width: '120px'
        },
        {
          prop: 'apiUrl',
          label: this.$t('interfaceUrl'),
          width: '250px',
          align: 'left'
        },
        {
          prop: 'method',
          label: this.$t('method'),
          width: '100px'
        },
        {
          prop: 'parameter',
          label: this.$t('parameter'),
          align: 'left'
        },
        {
          prop: 'timeUse',
          label: this.$t('timeUse'),
          width: '100px'
        },
        {
          prop: 'creator',
          label: this.$t('loginInfo'),
          width: '150px'
        },
        {
          prop: 'browser',
          label: this.$t('browser'),
          width: '150px'
        },
        {
          prop: 'clientIpAddress',
          label: this.$t('clientipAddress')
        },
        {
          prop: 'serverIpAddress',
          label: this.$t('serveripAddress')
        },
        {
          prop: 'createTime',
          label: this.$t('createTime')
        }
      ],
      tableLoading: true
    }
  },
  created() {
    this.initList()
    this.getModuleList()
  },
  methods: {
    switchHandle(val) {
      switch (val) {
        case 'del':
          this.handleDel()
          break
        default:
          break
      }
    },
    // 删除数据
    handleDel() {
      this.$confirm(
        this.$t('confirmClear'),
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        crudJob.delAllError().then(res => {
          this.doMerge(res)
          this.setOnePage()
          this.initList()
        })
      })
    },
    // 切换分页
    getList(val) {
      this.tableLoading = true
      this.listQuery = val
      this.initList()
    },
    // 初始化列表
    initList() {
      if (this.dataValue !== null && this.dataValue.length > 0) {
        this.search.start = this.dataValue[0]
        this.search.end = this.dataValue[1]
      } else {
        this.search.start = null
        this.search.end = null
      }
      let obj = {
        ...this.listQuery,
        ...this.search
      }

      obj = clearNull(obj)
      crudJob.getList(obj).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.tableLoading = false
      })
    },
    // 点击查询
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    // 获取异常详情
    info(detail) {
      this.dialog = true
      this.errorInfo = detail
    },
    getModuleList() {
      enumJob.getList({ enumName: 'BussinessModule', showType: 0 }).then(res => {
        this.moduleList = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
.el-row {
  padding: 22px 0px 22px 22px;
  background-color: #fff;
}
</style>
